// 根据个人id跳转个人信息页面
<template>
  <div class="personal">
    <!-- 点击个人信息 可以跳转编辑 -->
    <router-link :to="'/editPersonal/'+current.id">
      <!-- 个人信息 -->
      <div class="profile">
        <!-- 头像 -->
        <img :src="baseurl + current.head_img" alt />
        <div class="profile_center">
          <!-- 昵称 -->
          <div class="name">
            <span class="iconfont iconxingbienan"></span>
            {{current.nickname}}
          </div>
          <!-- 时间 -->
          <div class="time">2019-09-24</div>
        </div>
        <!-- 图标 -->
        <span class="wode iconfont iconwode"></span>
      </div>
    </router-link>
      <mycell title="我的关注" desc="关注的用户" @click="$router.push({
        path:'/myFollows'
      })"></mycell>
    <mycell title="我的跟帖" desc="跟帖/回复"></mycell>
    <mycell title="我的收藏" desc="文章/视频" @click="$router.push({
      path:'/myStars'
    })"></mycell>
    <mycell title="设置"></mycell>
    <mybtn class="btn" @click="exit">退出</mybtn>
    <mybtn class="btn" @click="$router.push({
        path:'/index'
      })">回到首页</mybtn>
  </div>
</template>

<script>
import mycell from "@/components/mycell.vue";
import mybtn from "@/components/mybtn.vue";
import { getUserDetail } from "@/apis/users";
import myaxios from "@/utils/myaxios";

export default {
  components: {
    mycell,
    mybtn,
  },
  data() {
    return {
      current: {},
      baseurl: "",
    };
  },
  async mounted() {
    this.baseurl = myaxios.defaults.baseURL;
    // 获取跳转需要的id
    let id = this.$route.params.id;
    // 根据id取请求获取用户详情；并且限制性这一步 await
    let res = await getUserDetail(id);
    console.log(res);
    if (res.data.message === "获取成功") {
      this.current = res.data.data;
    }
  },
  methods: {
    exit() {
      localStorage.removeItem('news');
      // 跳转到首页
      this.$router.push({name:'index'});
    },
    // toindex(){
    //   this.$router.push({
    //     path:'/index'
    //   })
    // }
  },
};
</script>

<style  lang='less' scoped>
.personal {
  width: 100vw;
  height: 100vh;
  background-color: #eee;
}
.profile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20 * 100vw/360 10 * 100vw/360;
  background-color: #fff;
  height: 60 * 100vw/360;
  margin-bottom: 30 * 100vw/360;
  img {
    width: 70 * 100vw/360;
    height: 70 * 100vw/360;
    border-radius: 50%;
  }
  .profile_center {
    flex: 1;
    padding: 0 10 * 100vw/360;
    .name {
      span {
        color: #75b9eb;
      }
    }
    .time {
      color: #666;
      font-size: 14 * 100vw/360;
      margin-top: 5 * 100vw/360;
    }
  }
  .wode {
    font-size: 20 * 100vw/360;
  }
}
a {
  color: #666;
}
.btn {
  margin: 20 * 100vw/360 auto 0;
  background-color: #ec3351;
}
</style>